<template>
  <div class="ele-body">
    <el-row :gutter="15">
      <el-col :md="6" :sm="8">
        <el-card shadow="never" body-style="padding: 25px;">
          <div class="user-info-card">
            <div class="user-info-avatar-group" >
              <img class="user-info-avatar" :src="form.attchment?form.attchment.filePath:''" alt="" />
              <i class="el-icon-upload2"></i>
            </div>
            <h2 class="user-info-name">{{ loginUser.accountName }}</h2>
            <div class="user-info-desc"></div>
          </div>
          <div class="user-info-list">
            <div class="user-info-item">
              <i class="el-icon-user"></i>
              <span>{{ roleName }}</span>
            </div>
            <div class="user-info-item">
              <i class="el-icon-office-building"></i>
              <span>{{ loginUser.companyName }} - {{ loginUser.organiztionName }}</span>
            </div>
            <!-- <div class="user-info-item">
              <i class="el-icon-location-information"></i>
              <span>中国 • 浙江省 • 杭州市</span>
            </div>
            <div class="user-info-item">
              <i class="el-icon-_school"></i>
              <span>JavaScript、HTML、CSS</span>
            </div> -->
          </div>
          <div style="margin: 30px 0 20px 0">
            <el-divider class="ele-divider-dashed ele-divider-base" />
          </div>
          <h6 class="ele-text" style="margin-bottom: 8px">标签</h6>
          <div class="user-info-tags">
            <el-tag size="mini" type="info">很有想法的</el-tag>
            <el-tag size="mini" type="info">专注设计</el-tag>
            <el-tag size="mini" type="info">辣~</el-tag>
            <el-tag size="mini" type="info">大长腿</el-tag>
            <el-tag size="mini" type="info">川妹子</el-tag>
            <el-tag size="mini" type="info">海纳百川</el-tag>
          </div>
        </el-card>
      </el-col>
      <el-col :md="18" :sm="16">
        <el-card shadow="never" body-style="padding: 0;">
          <el-tabs v-model="active" class="user-info-tabs">
            <el-tab-pane label="基本信息" name="info">
              <el-form
                ref="form"
                :model="form"
                label-width="90px"
                style="max-width: 450px; padding: 34px 20px 0 20px"
              >
                <el-form-item label="姓名:" >
                  <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="性别:" >
                  <el-input  v-model="form.sexDesc"  />
                </el-form-item>
                <!-- <el-form-item label="入职日期:" >
                  <el-date-picker v-model="form.inPositionDate" type="date" placeholder="选择入职日期"
                        format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" style="width:100%">
                    </el-date-picker>
                </el-form-item> -->
                <el-form-item label="地址:">
                  <el-input v-model="form.address"  />
                </el-form-item>
                <el-form-item label="联系电话:">
                  <div class="ele-cell">
                    <el-input v-model="form.phone"  />
                  </div>
                </el-form-item>
                <el-form-item label="个人简介:">
                <el-input
                  :rows="2"
                  type="textarea"
                  :maxlength="200"
                  v-model="form.remark"
                  placeholder="请输入个人简介"
                />
              </el-form-item>
                <!-- <el-form-item>
                  <el-button type="primary" :loading="loading">
                    保存更改
                  </el-button>
                </el-form-item> -->
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import { GetUserViewById } from '@/api/usermanager/usermanager';
  export default {
    name: 'UserProfile',
    data() {
      return {
        // tab页选中
        active: 'info',
        // 表单数据
        form: {},
        // 保存按钮loading
        loading: false,
        // 是否显示裁剪弹窗
        visible: false
      };
    },
    computed: {
      // 登录用户信息
      loginUser() {
        return this.$store.state.user.info;
      },
      // 角色名称
      roleName() {
        var names = this.$store.state.user.info.roles.reduce((a,o) => a +' ' + o.name,'');
        return names;
      },
    },
    created() {
      this.initData();
    },
    methods: {

      /* 初始化数据 */
      initData(){
        GetUserViewById(this.$store.state.user.info.userId)
          .then((res) => {
            this.form = res;
        });
      },
    }
  };
</script>

<style scoped>
  .ele-body {
    padding-bottom: 0;
  }

  .el-card {
    margin-bottom: 15px;
  }

  /* 用户资料卡片 */
  .user-info-card {
    padding: 8px 0;
    text-align: center;
  }

  .user-info-card .user-info-avatar-group {
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
  }

  .user-info-card .user-info-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
  }

  .user-info-card .user-info-avatar-group > i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 30px;
    display: none;
    z-index: 2;
  }

  .user-info-card .user-info-avatar-group:hover > i {
    display: block;
  }

  .user-info-card .user-info-avatar-group:hover:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .user-info-card .user-info-name {
    font-size: 24px;
    margin-top: 20px;
  }

  .user-info-card .user-info-desc {
    margin-top: 8px;
  }

  /* 用户信息列表 */
  .user-info-list {
    margin-top: 30px;
  }

  .user-info-list .user-info-item {
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
  }

  .user-info-item > i {
    margin-right: 10px;
    font-size: 16px;
  }

  .user-info-item > span {
    flex: 1;
    display: block;
  }

  /* 用户标签 */
  .user-info-tags .el-tag {
    margin: 10px 10px 0 0;
  }

  /* 用户账号绑定列表 */
  .user-account-list {
    padding: 16px 20px;
  }

  .user-account-list .user-account-item {
    padding: 15px;
  }

  .user-account-list .user-account-item .ele-text-secondary {
    margin-top: 6px;
  }

  .user-account-list .user-account-item .user-account-icon {
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    color: #fff;
    font-size: 26px;
    border-radius: 50%;
    background-color: #3492ed;
    box-sizing: border-box;
  }

  .user-account-list .user-account-item .user-account-icon.el-icon-_wechat {
    background-color: #4daf29;
    font-size: 28px;
  }

  .user-account-list .user-account-item .user-account-icon.el-icon-_alipay {
    background-color: #1476fe;
    padding-left: 5px;
    font-size: 32px;
  }

  /* tab页签 */
  .user-info-tabs ::v-deep .el-tabs__nav-wrap {
    padding-left: 24px;
  }

  .user-info-tabs ::v-deep .el-tabs__item {
    height: 50px;
    line-height: 50px;
    font-size: 15px;
  }
</style>
